<script setup>
import DetailContainer from "@/components/AdminConponents/DetailContainer.vue";
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import { formatTime } from '@/utils/format'
import {newsGetAPI} from "@/api/AdminApi/news.js";

const route = useRoute()
const newsInfo = ref({
  publisher: {},
  game: {}
})
const getNewsInfo = async (id = route.params.id) => {
  const res = await newsGetAPI(id)
  newsInfo.value = res.data
}
getNewsInfo()

// 编辑发行商
const router = useRouter()
const handleEdit = (id) => {
  router.push(`/admin/news/edit/${id}`)
}
</script>

<template>
  <DetailContainer title="新闻详情">
    <template #headerRight>
      <el-button @click="handleEdit(newsInfo.id)" type="success">编辑新闻</el-button>
    </template>
    <template #bodyTop>
      <el-descriptions border :column="1">
        <el-descriptions-item label="标题">{{ newsInfo.title }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          {{newsInfo.type === 0 ? '草稿' : '已发布'}}
        </el-descriptions-item>
        <el-descriptions-item label="发行商">{{ newsInfo.publisher.name }}</el-descriptions-item>
        <el-descriptions-item label="关联游戏">
          {{ newsInfo.game !== null ? newsInfo.game.chineseName : "无" }}
        </el-descriptions-item>
        <el-descriptions-item label="阅读/喜欢/不喜欢/分享">
          {{ newsInfo.view }}/{{ newsInfo.like }}/{{newsInfo.dislike}}/{{newsInfo.share}}
        </el-descriptions-item>
        <el-descriptions-item label="新闻内容">
          <div class="container" v-html="newsInfo.content"/>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #bodyBottom>
      <el-descriptions border :column="4">
        <el-descriptions-item label="创建时间">{{formatTime(newsInfo.createTime)}}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{formatTime(newsInfo.updateTime)}}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{newsInfo.createUser}}</el-descriptions-item>
        <el-descriptions-item label="修改人">{{newsInfo.updateUser}}</el-descriptions-item>
      </el-descriptions>
    </template>
  </DetailContainer>
</template>

<style scoped>

</style>
